<template>
	<view class="" style="background-image: url('https://s4.ax1x.com/2022/02/22/HxzZsH.png');
		background-repeat: no-repeat;
		background-size: 100% 380rpx;">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="龙海智慧物业" leftIcon="account" bgColor="#0B868E">
			</u-navbar>
		</view>


		<view class="con-body wrap">
			<u-cell-group :border="false">
				<view class="card-head">
					<u-cell :border="false">
						<view slot="icon">
							<u-avatar :src="user.avatar" size="90"></u-avatar>
						</view>
						<view slot="label" style="margin-left: 10rpx;">
							<view>
								<text style="font-size: 32rpx;">{{user.username}}</text>
							</view>
							<view style="margin-top: 15rpx;">

								<text style="font-size: 28rpx; color: #FFFFFF;">{{user.userid}}</text>
							</view>
							<view v-if="user.type == 1" style="margin-top: 20rpx; font-size: 26rpx; color: #696969;">
								<text>业主</text>
							</view>
							<view v-else style="margin-top: 20rpx; color: #FFFFFF;">

								<text>访客</text>
							</view>
						</view>
					</u-cell>

					<view>
						<text style="font-size: 30rpx; margin-left: 40rpx;color: #FFFFFF;">{{user.home}}</text>
					</view>
				</view>

			</u-cell-group>

			<view style="margin-top: 20rpx;">
				<view class="iconType" style="margin-top: 10rpx;">
					<view class="item">
						<view class="icon" @click="myHouse">
							<u-icon size="40" name="https://s4.ax1x.com/2022/02/22/HxzrSU.png"></u-icon>
						</view>
						我的房屋
					</view>
					<view class="item">
						<view class="icon" @click="myPark">
							<u-icon size="40" name="https://s4.ax1x.com/2022/02/22/HxzRT1.png"></u-icon>
						</view>
						我的车位
					</view>
					<view class="item">
						<view class="icon" @click="myFamily">
							<u-icon size="40" name="https://s4.ax1x.com/2022/02/22/HxzBWT.png"></u-icon>
						</view>
						我的家庭
					</view>
					<view class="item">
						<view class="icon" @click="pointMall">
							<u-icon size="40" name="https://s4.ax1x.com/2022/02/22/HxzslF.png"></u-icon>
						</view>
						我的工具
					</view>
				</view>
			</view>

			<view style="margin-top: 20rpx; background-color: #fefefe; border-radius: 20rpx;
		box-shadow: 5rpx 5rpx 20rpx rgba(0,0,0,0.15);">
				<u-cell-group style="margin-top: 10rpx;" :border="false">
					<u-cell :border="false" isLink @click="myCar" icon="https://s4.ax1x.com/2022/02/17/H4qHNF.png"
						title="我的车辆"></u-cell>
					<u-cell :border="false" isLink @click="myVisit" icon="https://s4.ax1x.com/2022/02/17/H4q7AU.png"
						title="我的访客"></u-cell>
					<u-cell :border="false" isLink @click="myRepair" icon="https://s4.ax1x.com/2022/02/17/H4qIBV.png"
						title="我的报修"></u-cell>
				</u-cell-group>
			</view>

			<view style="margin-top: 20rpx; background-color: #fefefe; border-radius: 20rpx;
			box-shadow: 5rpx 5rpx 20rpx rgba(0,0,0,0.15);">
				<u-cell-group style="margin-top: 10rpx;" :border="false">
					<u-cell :border="false" isLink @click="myShare" icon="https://s4.ax1x.com/2022/02/28/buryQg.png"
						title="我的共享"></u-cell>
					<u-cell :border="false" isLink @click="myCommunity" icon="https://s4.ax1x.com/2022/02/17/H4qo7T.png"
						title="我的社圈"></u-cell>
				</u-cell-group>
			</view>

			<view style="margin-top: 20rpx; background-color: #fefefe; border-radius: 20rpx;
		box-shadow: 5rpx 5rpx 20rpx rgba(0,0,0,0.15);">
				<u-cell-group style="margin-top: 10rpx;" :border="false">
					<u-cell :border="false" isLink @click="myFee" icon="https://s4.ax1x.com/2022/02/17/H4q5n0.png"
						title="我的缴费"></u-cell>
					<u-cell :border="false" isLink @click="myCollect" icon="https://s4.ax1x.com/2022/02/17/H4qO39.png"
						title="我的积分"></u-cell>
				</u-cell-group>
			</view>

			<view style="margin-top: 20rpx; background-color: #fefefe; border-radius: 20rpx;
		box-shadow: 5rpx 5rpx 20rpx rgba(0,0,0,0.15);">
				<u-cell-group style="margin-top: 10rpx;" :border="false">
					<u-cell :border="false" isLink @click="myReport" icon="https://s4.ax1x.com/2022/02/17/H4qXcR.png"
						title="功能反馈"></u-cell>
					<u-cell :border="false" isLink @click="myCollect" icon="https://s4.ax1x.com/2022/02/17/H4qjj1.png"
						title="客服中心"></u-cell>
				</u-cell-group>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					avatar: 'https://img2.baidu.com/it/u=3716715980,137628655&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
					username: '您好！请登录！',
					userid: '请登陆您的账户',
					level: 0,
					type: 0,
					home: '点击绑定房屋'
				}
			}
		},
		methods: {
			myFee() {
				this.$u.route({
					url: '/pagesMine/fee/index',
					params: {

					}
				});
			},
			myRepair() {
				this.$u.route({
					url: '/pagesMine/repair/index',
					params: {

					}
				});
			},
			myHouse() {
				this.$u.route({
					url: '/pagesMine/house/index',
					params: {

					}
				});
			},
			myCar() {
				this.$u.route({
					url: '/pagesMine/car/index',
					params: {

					}
				})
			},
			myReport() {
				this.$u.route({
					url: '/pagesMine/report/index',
					params: {

					}
				})
			},
			myVisit() {
				this.$u.route({
					url: '/pagesMine/visit/index',
					params: {

					}
				})
			},
			myCommunity() {
				this.$u.route({
					url: '/pagesMine/community/index',
					params: {

					}
				})
			},
			myShare() {
				this.$u.route({
					url: '/pagesMine/share/index',
					params: {

					}
				})
			},
			myPark() {
				this.$u.route({
					url: '/pagesMine/park/index',
					params: {

					}
				})
			},
			myFamily() {
				this.$u.route({
					url: '/pagesMine/family/index',
					params: {

					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 96%;
		margin-left: 2%;
		margin-bottom: 44rpx;
	}

	.card-head {
		border-radius: 20rpx;
	}

	.iconType {
		display: flex;
		padding: 10rpx 40rpx;
		background-color: #fefefe;
		border-radius: 20rpx;
		box-shadow: 5rpx 5rpx 20rpx rgba(0, 0, 0, 0.15);
		justify-content: space-between;
	}

	.icon {
		height: auto;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #666666;
	}
</style>
